<template>
	<view class="containner">
		<view class="tabs">
			<u-tabs :list="list" :is-scroll="false" active-color="#fc562f" v-model="current" @change="change"></u-tabs>
		</view>
		<!-- 全部 -->
		<view class="groupContent" v-if="current == 0">
			<view class="groupItem" v-for="(item,index) in grouplist" :key="index" @click="handlerdetail(item.sgo_id,type=1)">
				<view class="item">
					<!-- 店铺名字 -->
					<view class="dpName">
						<view class="status">
							<view class="ing">
								拼团中,还差{{item.diff_number}}人拼团成功
							</view>
						</view>
					</view>
					<!-- 商品信息 -->
					<view class="goodsInfo">
						<view class="left">
							<image :src="item.goods.groupbuy_image" mode="widthFix"
								style="width: 220rpx;height: 220rpx;"></image>
						</view>
						<view class="right">
							<view class="name ct">
								{{item.goods.goods_name}}
							</view>

							<view class="priceBox ct">
								<view class="price" style="color: #FA453CFF;font-size: 36rpx;">
									<span
										style="font-size: font-size: 24rpx;;">拼团价￥</span><span>{{item.goods.groupbuy_price}}</span>
								</view>
								<view class="num">
									x{{item.sgo_number}}
								</view>
							</view>
						</view>
					</view>
					<!-- 价格信息 -->
					<view class="totalPrice">
						<span>共{{item.sgo_number}}件商品实付：￥{{item.sgo_amount}}</span>
					</view>
					<!-- 拼团信息 -->
					<view class="ptInfo">
						<view class="info">{{item.current_number+item.diff_number}}人团，距成功，还剩：<u-count-down :timestamp="timestampToTime(item.sgo_timeout)"></u-count-down></view>
						<view class="btns" style="background: #fc562f;color: #fff;" @click.stop="handlerCount(item.diff_number,item.goods.groupbuy_image)">
							邀请好友</view>
					</view>
				</view>

			</view>
		</view>
		<view class="groupContent" v-if="current == 1">
			<view class="groupItem" v-for="(item,index) in grouplist" :key="index" @click="handlerdetail(item.sgo_id,type=2)">
				<!-- 店铺名字 -->
				<view class="item">

					<view class="dpName">
						<view class="status">
							<view class="over">
								<image src="/static/img/ywc@3x.png" mode="widthFix"
									style="width: 60rpx; height: 60rpx;">
								</image>
							</view>
						</view>
					</view>
					<!-- 商品信息 -->
					<view class="goodsInfo">
						<view class="left">
							<image :src="item.pic" mode="widthFix" style="width: 220rpx;height: 220rpx;"></image>
						</view>
						<view class="right">
							<view class="name ct">
								{{item.goods.goods_name}}
							</view>

							<view class="priceBox ct">
								<view class="price" style="color: #FA453CFF;font-size: 36rpx;">
									<span
										style="font-size: font-size: 24rpx;;">拼团价￥</span><span>{{item.goods.groupbuy_price}}</span>
								</view>
								<view class="num">
									x{{item.sgo_number}}
								</view>
							</view>
						</view>
					</view>
					<!-- 价格信息 -->
					<view class="totalPrice">
						<span>共{{item.sgo_number}}件商品实付：￥{{item.sgo_amount}}</span>
					</view>
					<!-- 拼团信息 -->

					<view class="ptInfo">
						<view class="info">{{item.current_number+item.diff_number}}人团，已成功</view>
						<view class="btns" style="border: 1px solid #E6E6E6;">查看详情</view>
					</view>

				</view>
			</view>
		</view>
		<view class="groupContent" v-if="current == 2">
			<view class="groupItem" v-for="(item,index) in grouplist" :key="index" @click="handlerdetail(item.sgo_id,type=3)">
				<!-- 店铺名字 -->
				<view class="item">

					<view class="dpName">
						<view class="status">
							<view class="over">
								<image src="/static/img/ysb@3x.png" mode="widthFix"
									style="width: 60rpx; height: 60rpx;">
								</image>
							</view>
						</view>
					</view>
					<!-- 商品信息 -->
					<view class="goodsInfo">
						<view class="left">
							<image :src="item.goods.groupbuy_image" mode="widthFix"
								style="width: 220rpx;height: 220rpx;"></image>
						</view>
						<view class="right">
							<view class="name ct">
								{{item.goods.goods_name}}
							</view>
							<view class="priceBox ct">
								<view class="price" style="color: #FA453CFF;font-size: 36rpx;">
									<span
										style="font-size: font-size: 24rpx;;">拼团价￥</span><span>{{item.goods.groupbuy_price}}</span>
								</view>
								<view class="num">
									x{{item.sgo_number}}
								</view>
							</view>
						</view>
					</view>
					<!-- 价格信息 -->
					<view class="totalPrice">
						<span>共{{item.sgo_number}}件商品实付：￥{{item.sgo_amount}}</span>
					</view>
					<view class="ptInfo">
						<view class="info">{{item.current_number+item.diff_number}}人团，已失败</view>
						<view class="btns" style="border: 1px solid #E6E6E6;">查看详情</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" />
		<u-popup v-model="showpopup" mode="bottom">
			<view>
				<view>
					<view class="titleCount">还差{{nowCount}}人，去邀请好友吧</view>
					<!-- 方式 -->
					<view class="shareBtn">
						<button open-type="share" plain class="btn" @click="onShareAppMessage">
							<view class="">
								<u-icon name="weixin-circle-fill" color="#3EB034" size="96"></u-icon>
							</view>
							<text>微信好友</text>
						</button>
						<button open-type="share" plain class="btn" @click="onShareTimeline">
							<view class="">
								<u-icon name="moments-circel-fill" color="#3EB034" size="96"></u-icon>
							</view>
							<text>朋友圈</text>
						</button>
					</view>
				</view>
				<!-- 取消 -->
				<view @click="showpopup = false" class="cancelBtn">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getGrouplist,
	} from '@/common/group.js'
	import {
		getGroupbuyPay
	} from '@/api/user.js'
	export default {
		data() {
			return {
				list: [ {
					name: '等待拼团'
				}, {
					name: '拼团成功'
				}, {
					name: '拼团失败'
				}],
				current: 0,
				grouplist: [],
				page: 1,
				status: 'loadmore',
				type: 'wait',
				showpopup: false,
				nowCount: 0,
				imageurl:""
			};
		},
		mounted() {
			this.init()
		},
		onLoad() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})

		},
		onReachBottom() {
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				this.init()
			}, 2000)
		},
		// 分享朋友
		onShareAppMessage(res) {
			return {
				title: '哥哥，帮我一把嘛！！',
				path: '/pages/home/home',
				imageUrl: this.imageurl
			};
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: '哥哥，帮我一把嘛！！',
				path: '/pages/home/home',
				imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
			};
		},
		methods: {
			change(index) {
				this.page = 1;
				if (index == 0) {
					this.type = 'wait'
				}
				if (index == 1) {
					this.type = 'success'
				}
				if (index == 2) {
					this.type = 'fail'
				}
				
				this.grouplist = [];
				this.init()
			},
			handlerCount(count,img) {
				this.imageurl = img
				this.showpopup = true;
				this.nowCount = count
			},
			init() {
				let that = this
				getGrouplist({
					page: this.page,
					type: this.type
				}).then(res => {
					console.log("拼团详情", res);
					if (res.list.length == 0) {
						that.status = 'nomore'
					} else {
						res.list.map(item => {
							that.grouplist.push(item)
						})
					}
				})
			},
			handlerdetail(id,type) {
				uni.navigateTo({
					url: `/page/group-order-detail/group-order-detail?id=${id}&type=${type}`
				})
			},
			// 支付订单
			handlerpay(item) {
				getGroupbuyPay({
					order_no: item.sgo_ordersn
				}).then(res => {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: 'MD5',
						paySign: res.data.paySign,
						success: function(res) {
							// success && success(res.data);
							toast('支付成功');
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							}, 500);
						},
						fail: function(err) {
							uni.showToast({
								title: '支付失败',
								icon: 'none',
								duration: 2000
							});
							// fail && fail(err.data);
						},
						complete(ress) {
							// complete && complete(ress.data);
						}
					});
				})
			},
			timestampToTime(timestamp) {
				timestamp = timestamp ? timestamp : null;
				var timestamp1 = new Date().getTime()
				var timestamp2 = timestamp * 1000 - timestamp1
				if (timestamp2 < 0) {
					return "已过期"
				}
				return timestamp2;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.containner {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	// 店铺信息
	.item {
		width: 750rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		background-color: #fff;
		border-radius: 20rpx;

		.dpName {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 0;
			font-size: 30rpx;
			color: #333333;
			border-bottom: 1rpx solid #e6e6e6;

			.dpInfo {
				display: flex;
				align-items: center;

			}

			.dpInfo .pic {
				margin-right: 18rpx;
			}

			.status {
				font-size: 26rpx;
			}

		}

		.goodsInfo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #e6e6e6;

			.left {
				width: 220rpx;
				height: 220rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}

			.right {
				width: 460rpx;
				height: 220rpx;

			}

			.right .ct {
				padding: 20rpx 0;
				width: 460rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

		}

		.totalPrice {
			display: flex;
			flex-direction: row-reverse;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #e6e6e6;
		}

		.ptInfo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;

			.btns {
				width: 150rpx;
				height: 56rpx;
				border-radius: 28rpx;
				text-align: center;
				line-height: 56rpx;
				color: #333;
				font-size: 24rpx;
			}
		}

	}




	.titleCount {
		text-align: center;
		padding: 15upx;
	}

	.shareBtn {
		display: flex;
		justify-content: space-around;

		.btn {
			border: none;

			>view {
				width: 96upx;
				height: 96upx;
				margin: 0 auto;
			}
		}
	}

	.cancelBtn {
		text-align: center;
		padding: 20upx;
	}
</style>